{% extends "base.html" %}

{% block content %}
<!-- 轮播图 -->
<div id="mainCarousel" class="carousel slide mb-5" data-bs-ride="carousel">
    <div class="carousel-indicators">
        {% for antique in antiques[:5] %}
        <button type="button" data-bs-target="#mainCarousel" data-bs-slide-to="{{ loop.index0 }}" 
                {% if loop.first %}class="active"{% endif %}></button>
        {% endfor %}
    </div>
    <div class="carousel-inner">
        {% for antique in antiques[:5] %}
        <div class="carousel-item {% if loop.first %}active{% endif %}">
            <img src="{{ url_for('static', filename='uploads/' + antique.main_image) }}" 
                 class="d-block w-100" alt="{{ antique.name }}" style="height: 400px; object-fit: cover;">
            <div class="carousel-caption d-none d-md-block bg-dark bg-opacity-50 rounded p-3">
                <h3>{{ antique.name }}</h3>
                <p>{{ antique.description[:100] }}{% if antique.description|length > 100 %}...{% endif %}</p>
                <a href="{{ url_for('antique_detail', id=antique.id) }}" class="btn btn-light">查看详情</a>
            </div>
        </div>
        {% endfor %}
    </div>
    <button class="carousel-control-prev" type="button" data-bs-target="#mainCarousel" data-bs-slide="prev">
        <span class="carousel-control-prev-icon"></span>
    </button>
    <button class="carousel-control-next" type="button" data-bs-target="#mainCarousel" data-bs-slide="next">
        <span class="carousel-control-next-icon"></span>
    </button>
</div>

<h1 class="mb-4 text-center">古董藏品展示</h1>

<div class="row row-cols-1 row-cols-md-3 g-4">
    {% for antique in antiques %}
    <div class="col">
        <div class="card h-100 antique-card shadow-sm">
            {% if antique.main_image %}
            <img src="{{ url_for('static', filename='uploads/' + antique.main_image) }}" 
                 class="card-img-top antique-image" alt="{{ antique.name }}"
                 style="height: 200px; object-fit: cover;">
            {% endif %}
            <div class="card-body d-flex flex-column">
                <h5 class="card-title">{{ antique.name }}</h5>
                <div class="card-text mb-2">
                    <small class="text-muted">
                        <i class="bi bi-calendar"></i> 年代：{{ antique.era }}
                    </small>
                </div>
                <div class="card-text mb-2">
                    <small class="text-muted">
                        <i class="bi bi-rulers"></i> 尺寸：{{ antique.dimensions }}
                    </small>
                </div>
                {% if antique.price %}
                <div class="card-text mb-2">
                    <small class="text-danger">
                        <i class="bi bi-tag"></i> 优惠价：{{ antique.price }}
                    </small>
                </div>
                {% endif %}
                <p class="card-text description-text">{{ antique.description }}</p>
                <div class="mt-auto">
                    <a href="{{ url_for('antique_detail', id=antique.id) }}" class="btn btn-primary w-100">查看详情</a>
                </div>
            </div>
        </div>
    </div>
    {% endfor %}
</div>

<style>
.antique-card {
    transition: transform 0.2s;
}

.antique-card:hover {
    transform: translateY(-5px);
}

.antique-image {
    border-bottom: 1px solid rgba(0,0,0,0.1);
}

.description-text {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 1rem;
    min-height: 4.5em;
}
</style>
{% endblock %} 